<template>
	<view class="container">
		<!-- 设置项 -->

		<!-- 设置项 -->
		<view class="settings">
			<!-- 设置区的标题 -->
			<view class="settings-title">设置项</view>

			<!-- 各个设置项 -->
			<view class="setting-item-wrapper">
				<view :class="activeSetting=='gameMode'?'green':'grey'" class="setting-item" @click="setGameMode">
					<view class="setting-title">游戏模式设置</view>
					<view class="setting-sub">请选择开始模式</view>
				</view>

				<view :class="activeSetting=='frequency'?'green':'grey'" class="setting-item" @click="setFrequency">
					<view class="setting-title">频率设置</view>
					<view class="setting-sub">发球频率50%</view>
				</view>
			</view>
			<view class="setting-item-wrapper">
				<view :class="activeSetting=='power'?'green':'grey'" class="setting-item" @click="setPower">
					<view class="setting-title">力度设置</view>
					<view class="setting-sub">发球力度50%</view>
				</view>
				<view :class="activeSetting=='angle'?'green':'grey'" class="setting-item" @click="setAngle">
					<view class="setting-title">角度设置</view>
					<view class="setting-sub">左右角度0，上下角度0</view>
				</view>
			</view>
		</view>

		<!-- 标题 -->
		<view class="title">
			<image src="/static/first-start.png"></image>
			<text class="main-title">默认设置</text>

		</view>
		<template v-if="activeSetting=='gameMode'">
			<!-- 布局：分为两列 -->
			<view class="main-content">
				<!-- 选项按钮 -->
				<view class="options">
					<button class="option-button" @click="setBalls(30)">30球</button>
					<button class="option-button" @click="setBalls(50)">50球</button>
					<button class="option-button" @click="continuousServe">持续发球</button>
					<button class="option-button" @click="leftRightServe">左右球</button>
					<button class="option-button" @click="unlockBalls">带解锁</button>
				</view>
			</view>

			<!-- start-column 放在右下角，并且按钮上下排列 -->
			<view class="start-column">
				<image src="/static/start.png"></image>
				<button class="start-button" @click="startGame">开始/结束</button>
			</view>
		</template>



		<template v-if="activeSetting=='frequency'">
			<!-- 布局：分为两列 -->
			<view class="main-content-frequency">
				<!-- 选项按钮 -->
				<view class="options">
					<button class="option-button" @click="setBalls(30)">30球</button>
					<button class="option-button" @click="setBalls(50)">50球</button>
					<button class="option-button" @click="continuousServe">持续发球</button>
					<button class="option-button" @click="leftRightServe">左右球</button>
					<button class="option-button" @click="unlockBalls">带解锁</button>
				</view>
			</view>

			<!-- start-column 放在右下角，并且按钮上下排列 -->
			<view class="start-column-frequency">
				<image src="/static/start.png"></image>
				<button class="start-button" @click="startGame">开始/结束</button>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeSetting: 'gameMode', // 当前高亮的设置项
			};
		},
		methods: {
			setGameMode() {
				this.activeSetting = 'gameMode'; // 设置为高亮
			},
			setFrequency() {
				this.activeSetting = 'frequency'; // 设置为高亮

			},
			setPower() {
				this.activeSetting = 'power'; // 设置为高亮
			},
			setAngle() {
				this.activeSetting = 'angle'; // 设置为高亮
			},

			setBalls(number) {
				// 设置球数的逻辑
			},
			continuousServe() {
				// 持续发球的逻辑
			},
			leftRightServe() {
				// 左右球的逻辑
			},
			unlockBalls() {
				// 带解锁的逻辑
			},
			startGame() {
				// 开始游戏的逻辑
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #000;
		color: #fff;
		padding: 20px;
		height: 100vh;
		/* 高度为视口高度 */
		overflow: hidden;
		/* 禁止所有滚动 */
	}

	.active {
		border: 2px solid #fff;
		/* 白色边框 */
		background-color: #5ab716;
		/* 高亮的绿色背景 */
		color: #000;
		/* 文字颜色 */
	}

	/* settings部分样式 */
	.settings {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 10px;
	}

	/* 设置区的标题样式 */
	.settings-title {
		font-size: 28rpx;
		/* 设置标题字体大小 */
		font-weight: bold;
		/* 设置字体为粗体 */
		color: #fff;
		/* 设置字体颜色为白色 */
		margin-bottom: 20rpx;
		/* 给标题下方留出一些空间 */
		text-align: left;
		/* 标题居左对齐 */
	}

	/* 包裹每一行setting-item的容器 */
	.setting-item-wrapper {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20rpx;
		/* 增加每行设置项之间的间距 */
	}

	/* 各个设置项 */
	.setting-item {
		width: 42%;
		/* 每个setting-item占48%宽度，留出间隙 */
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		border-radius: 10px;
		cursor: pointer;
		margin-bottom: 10rpx;
		/* 增加上下间距为20rpx */
	}

	.setting-item.green {
		background-color: #1aad19;
		/* 绿色背景 */
	}

	.setting-item.gray {
		background-color: #666;
		/* 灰色背景 */
	}

	/* 设置项标题 */
	.setting-title {
		font-size: 32rpx;
		/* 设置每个设置项标题的字体大小 */
		font-weight: bold;
		/* 每个设置项标题设置为粗体 */
		color: #fff;
		/* 设置字体颜色为白色 */
		margin-bottom: 10rpx;
		/* 增加标题和子标题之间的间距为20rpx */
	}

	/* 设置项子标题 */
	.setting-sub {
		font-size: 20rpx;
		/* 设置每个设置项子标题的字体大小 */
		color: #ccc;
		/* 子标题的颜色为浅灰色 */
	}

	.title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		margin: 5px auto;
		/* 给标题和下方内容留点空间 */
	}


	/* image 样式 */
	.title image {
		width: 525rpx;
		/* 设置图片宽度 */
		height: 215rpx;
		/* 设置图片高度 */
		margin-right: 20rpx;
	}

	/* main-title 样式 */
	.main-title {
		margin-top: 60px;
		display: inline-block;
		/* 让 text 元素变为块级元素，以便调整背景 */
		background-color: #5AB716;
		/* 背景颜色 */
		color: #fff;
		/* 字体颜色 */
		height: 59rpx;
		/* 高度设置为 59rpx */
		line-height: 59rpx;
		/* 让文字垂直居中 */
		width: 162rpx;
		padding: 0 20rpx;
		/* 给按钮左右一些内边距 */
		border-radius: 10px;
		/* 设置圆角 */
		text-align: center;
		/* 文字居中 */
		font-size: 32rpx;
		/* 设置字体大小 */
		font-weight: 400;
		/* 字体加粗 */
		transition: background-color 0.3s ease;
		/* 按钮背景过渡效果 */
	}

	.main-title:hover {
		background-color: #4f9e11;
		/* 悬停时背景色稍微变暗 */
	}

	.main-content {
		display: flex;
		justify-content: space-between;
		/* 左右两列分开 */
		width: 100%;
		/* 容器宽度填满 */
		margin-top: 5px;
		/* 给上方的内容留空间 */
	}

	.options {
		width: 40%;
		/* 选项列宽度 */
		display: flex;
		flex-direction: column;
		/* 竖排 */
		align-items: flex-start;

		/* 左对齐 */
	}

	.option-button {
		width: 80%;
		/* 按钮宽度适中 */
		margin: 10rpx 0;
		border-radius: 53rpx;
		text-align: center;
		border: 6rpx solid #fff;
		/* 白色边框 */
		background-color: transparent;
		/* 无背景 */
		color: #fff;
		/* 默认字体颜色为白色 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	.option-button:hover {
		border-color: #1aad19;
		/* 高亮时边框变绿色 */
		color: #1aad19;
		/* 高亮时字体颜色变绿色 */
	}

	.option-button:active {
		border-color: #1aad19;
		/* 按下时边框变绿色 */
		color: #1aad19;
		/* 按下时字体颜色变绿色 */
	}

	.option-button:focus {
		outline: none;
		/* 去掉焦点框 */
	}


	/* start-column 布局调整 */
	.start-column {
		position: absolute;
		/* 绝对定位 */
		bottom: -40px;
		/* 离底部 20px */
		right: 20px;
		/* 离右边 20px */
		display: flex;
		flex-direction: column;
		/* 按钮竖排 */
		align-items: center;


		image {
			width: 182rpx;
			height: 182rpx;
		}
	}

	.start-button {
		width: 100%;
		/* 按钮宽度填满父容器 */
		margin: 10px 0;
		/* 上下按钮之间的间距 */
		// padding: 10px;
		/* 给按钮一点内边距 */
		border-radius: 10px;
		/* 圆角 */
		background-color: transparent;
		/* 无背景 */
		color: #FFFFFF;
		/* 字体颜色为白色 */
		font-size: 36rpx;
		/* 字体大小为 36rpx */
		text-align: center;
		/* 文本居中 */
		border: none;
		/* 去掉边框 */
		transition: all 0.3s ease;
		/* 平滑过渡效果 */
	}

	.start-button:hover {
		/* 如果需要悬停高亮效果可以在这里修改 */
		cursor: pointer;
		/* 悬停时显示手型 */
	}

	.start-button:focus {
		outline: none;
		/* 去掉焦点框 */
	}
</style>